<template>
    <div :class="propJson.editFlag ? 'editFlagClass' : ''">
        <el-tree
            :data="dataInfo"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :tempInfo="content"
            :default-expand-all="propJson.isExpandAll"
            :style="treeStyle"
            :highlight-curren="true"
        >
            <template #default="scope" v-if="propJson.isAddCustomAction">
                <div :style="templateDivStyle">
                    <span>{{ scope.node.label }}</span>
                    <slot :name="propJson.slotName" :scope="scope"></slot>
                </div>
            </template>
        </el-tree>
    </div>
</template>

<script setup lang="ts" name="TreeComponent">
import {computed, defineProps, ref} from "vue";
import {doThirdServiceAction, doThirdServiceValue} from "@/utils/lowcode/thirdService.ts";
import {deepCopy} from "@/utils/ywuCommon.ts";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let defaultProps = computed(() => {
    return {
        children: propJson.value.childrenField,
        label: propJson.value.labelField,
        value: propJson.value.valueField
    }
})

let templateDivStyle = computed(() => {
    let res = "flex: 1;display: flex;align-items: center;justify-content: space-between;";
    res += "font-size: " + propJson.value.fontSize + ";";
    return res;
})

let treeStyle = computed(() => {
    let res = "";
    res += "--el-tree-node-content-height: " + propJson.value.treeHeight + ";";
    return res;
})

interface Tree {
    label: string
    children?: Tree[]
    value?: string
}

let content = computed(() => {
    doResponse();
})

let dataInfo = ref<Tree[]>()

function execThen(resValue: any) {
    dataInfo.value = resValue
}

async function doResponse() {
    await doThirdServiceValue(propJson.value.contentInfo, commonParam.value, execThen, () => {}, null)
}

const handleNodeClick = async (data: Tree) => {
    if (!propJson.value.isAddClickAction) {
        return;
    }
    // 判断当前存在子级菜单
    let isChild = false;
    if (data[propJson.value.childrenField] && data[propJson.value.childrenField].length > 0) {
        isChild = false;
    } else {
        isChild = true;
    }
    // 判断当前是否配置了只有子级节点可以点击
    if (propJson.value.isOnlyChildrenClick) {
        if (!isChild) {
            // 非子节点不可触发
            return;
        }
    }
    // 构建参数
    let resList = deepCopy(propJson.value.treeClickAction)
    for (let i = 0; i < resList.length; i++) {
        let item = resList[i]
        let itemParamList = item['apiParamList']
        for (let j = 0; j < itemParamList.length; j++) {
            if (itemParamList[j]['type'] === "custom" && itemParamList[j]['variableValue'].startsWith("innerParam.")) {
                let tempValue = itemParamList[j]['variableValue']
                tempValue = tempValue.replaceAll("innerParam.", "")
                itemParamList[j]['variableValue'] = data[tempValue];
            }
        }
    }
    // 执行请求
    // 定义一个标志位，后续同步执行
    let awaitObj = {flag: false, res: true}
    await doThirdServiceAction(resList, awaitObj, commonParam.value, () => {}, () => {}, null);
}
</script>

<style scoped lang="less">
.editFlagClass {
    padding: 20px;
}

</style>